<template>
    <my-list-space top="150px">
        <v-data-table
                v-model="selected"
                :style="{width: $store.state.availableWidth}"
                mobile-breakpoint="10"
                hide-default-footer
                :headers="headers"
                show-select
                :items="recycleList"
                :items-per-page="999"
                item-key="id"
                height="100%"
                fixed-header
                no-data-text="回收站中没有文件"
        >
            <template v-slot:item.data-table-select="{ isSelected, select }">
                <v-simple-checkbox
                        color="green"
                        :value="isSelected"
                        @input="select($event)">
                </v-simple-checkbox>
            </template>
            <template v-slot:item.name="{ item }">
                <div>
                    <v-icon size="28px" class="mr-2" :color="getIconByType(item.file.type, item.file.name).color">
                        {{getIconByType(item.file.type, item.file.name).icon}}
                    </v-icon>
                    <span id="file-name">{{ item.file.name }}</span>
                </div>
            </template>
            <template v-slot:item.size="{ item }">
            <span>
                {{ formatSize(item.file.size) }}
            </span>
            </template>
            <template v-slot:item.validTime="{ item }">
                {{getValidData(item.deleteTime)}} 天
            </template>
        </v-data-table>
    </my-list-space>
</template>

<script>
    import {getIconByType, formatSize} from "../../../util";
    import MyListSpace from "../common/MyListSpace";

    export default {
        name: "MyRecycleTable",
        components: {MyListSpace},
        props: {
            recycleList: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                headers: [
                    {text: '文件名', value: 'name'},
                    {text: '大小', value: 'size'},
                    {text: '删除日期', value: 'deleteTime'},
                    {text: '有效时间', value: 'validTime'}
                ],
            }
        },
        methods: {
            getIconByType,
            formatSize,
            getValidData(deleteTime) {
                let endDate = new Date(deleteTime)
                endDate.setDate(endDate.getDate() + 3)
                let validDate = endDate.getTime() - new Date().getTime();
                return (validDate / (24 * 3600 * 1000)).toFixed(1)
            }
        },
        computed: {
            selected: {
                get() {
                    return this.$store.state.selected;
                },
                set(value) {
                    this.$store.commit('setSelected', value)
                }
            }
        }
    }
</script>

<style scoped>
</style>